<template>
	<Row :gutter="24" v-show="show">
		<ICol span="11" offset="1">
			<div class="img_crop_hd">
				<h4 class="img_crop_title">原图</h4>
			</div>
			<div class="img_crop_wrp">
				<img class="img_crop_origin" :src="cropper.img">
			</div>
		</ICol>
		<ICol span="11" offset="1">
			<div class="img_crop_hd">
				<h4 class="img_crop_title">封面展示区域</h4>
				<p class="tips" v-if="fixedNumber[0] == 9">首篇图文封面图片长宽比只能为9：5，拖拽裁剪框调整展示区域,鼠标滚轮缩放图片</p>
				<p class="tips" v-else>次篇图文封面图片长宽比只能为1：1，拖拽裁剪框调整展示区域,鼠标滚轮缩放图片</p>
			</div>
			<div class="img_crop_wrp">
				<vueCropper
				ref="cropper"
				:img="cropper.img"
				:outputSize="cropper.size"
				:outputType="cropper.outputType"
				:info="cropper.info"
				:canScale="cropper.canScale"
				:autoCrop="cropper.autoCrop"
				:fixed="cropper.fixed"
				:fixedNumber="fixedNumber"
			 style="width:401px;height: 401px;"></vueCropper>
			</div>
		</ICol>
	</Row>
</template>
<script>
	import VueCropper  from 'vue-cropper';
	import {Row,Col} from 'iview';

	export default{
		components:{
            VueCropper ,
            Row,
            'ICol':Col,
        },
        props :{
        	callback:{
                type: Function,
                required : true,
            },
            fixedNumber:{
                type: Array,
                required : true,
            },
        },
        data () {
            return {
            	show : false,
            	cropper :{
            		img: '',
					info: true,
					size: 1,
					outputType: 'png',
					canScale: true,
					autoCrop: true,
					fixed: true,
            	}
            }
        },
        methods:{
        	getCropper(){
        		this.$refs.cropper.getCropData((data) => {
        			this.callback(data);
				})
        	}
        },
	}
</script>
<style>
	.cropper-box{z-index: 1;}
	.cropper-drag-box{z-index: 2;}
	.cropper-crop-box{z-index: 2;}
	.img_crop_hd {height: 70px; }
	.img_crop_hd .img_crop_title{font-weight: 600}
	.img_crop_hd .tips{color: #8d8d8d;margin-top: 15px;}
	.img_crop_wrp {border: 1px solid #e7e7eb; background-color: #f4f5f9; display: inline-block; vertical-align: top; margin-bottom: 20px; width: 400px; height: 400px; text-align: center; font-size: 0;}
	.img_crop_wrp .img_crop_origin {max-width: 100%; max-height: 100%; vertical-align: middle; }
</style>